<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" href="../aui/css/aui.2.0.css">
</head>
    <body>
    <div id="app">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label aui-margin-r-15">
                        排序方式:
                    </div>
                    <div class="aui-list-item-input">
                        <select v-model="time_zhouqi">
                            <option>每周</option>
                            <option>每月</option>
                            <option>每年</option>
                        </select>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    </body>
</html>
<script src="vue2.1.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            time_zhouqi: '每周',
        },
        methods: {
            clickme: function () {
                console.log(vm.time_zhouqi);
            }
        },
    	watch: {
            time_zhouqi: {
    		  handler: function (val, oldVal) {
                console.log("新值"+val+"-----老值"+oldVal);
                  api.ajax({
                      url: 'path',
                      method: 'post',
                      timeout: 30,
                      dataType: 'json',
                      returnAll: false,
                      data: {
                          values: {
                              time_zhouqi: vm.time_zhouqi
                          }
                      }
                  }, function (ret, err) {
                      if (ret) {
                          console.log(JSON.stringify(ret));
                      } else {
                          console.log(JSON.stringify(err));
                      }
                  });
    		  },
    		  deep: true
    		}
    	}
    });
</script>